{extend name="base/common"}

{block name="style"}
<link href="__ADMIN__/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
<style>
    .showbox {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*padding: 5%;*/
        background: rgba(0, 0, 0, 0.3);
        display: none;
        width: 100%;
        height: 100%;
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: -98vw;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>每日一句</h2>
        <ol class="breadcrumb">
            <li>
                首页
            </li>
            <li class="active">
                <strong><a href="{:Url('index')}">列表页</a></strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据列表</h5>
                    <div class="ibox-tools">
                        <div class="ladda-button ladda-button-user btn btn-sm
                        btn-primary" >
                            <input type="file" name="excel" id="excel" style="width:100%;height:100%;position: absolute; opacity: 0"/>
                            Excel导入
                        </div>&emsp;
                        <a data-toggle="modal" class="btn btn-sm btn-primary" href="{:Url('add')}">添加</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>标题</th>
                                <th>类型</th>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.title|msubstr=0,30}</td>
                                <td>{$vo->type_text}</td>
                                <td>{$vo.create_time|time_format='Y-m-d'}&emsp;/&emsp;{$vo.create_time|getWeek}</td>
                                <td>
                                    <a href="{:Url('edit?id='.$vo['id'])}">修改</a>&emsp;
                                    <a href="{:Url('del?id='.$vo['id'])}" class="confirm ajax-del">删除</a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="10">
                                    <div class="page">{$_page}</div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="iframe" src="" style="height: 80%;width: 392px;z-index: 99;position: absolute;top: 10%;border: 0;left: 32%;background: #fff;display: none;" scrolling="auto" seamless></iframe>
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}

{block name="script"}
<script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/spin.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/ladda.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/ladda.jquery.min.js"></script>
<script>
    highlight_subnav("{:Url('Translate/index')}");
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
    $('#excel').change(function(){
        var l = $( '.ladda-button-user' ).ladda();
        l.ladda( 'start' );
        var formData = new FormData();
        formData.append('excel', $(this)[0].files[0]);
        $.ajax({
            type: "post",
            url: "{:Url('Translate/inserExcel')}",
            data:formData,
            processData : false,
            contentType : false,
            beforeSend:function () {
                $(".showbox").show();
            },
            success: function (data) {
                $(".showbox").hide();
                if(data.code == 1){
                    updateAlert(data.msg, 'success');
                }else{
                    updateAlert(data.msg, 'error');
                }
                setTimeout(function(){
                    location.reload();
                },2000);
            },error:function (res) {
                updateAlert('导入失败请重试!', 'error');
            }
        });
    });
</script>
{/block}